<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span class="header-title">反馈管理</span>
            </div>
        </template>
        <!-- 反馈列表 -->
        <el-table
            :data="feedbacks"
            border
            stripe
            highlight-current-row
            class="article-table"
            style="width: 100%; margin: 32px 0 16px 0; border-radius: 12px;"
        >
            <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
            <el-table-column label="反馈类型" prop="feedbackType" width="120" align="center"></el-table-column>
            <el-table-column label="反馈内容" prop="content" min-width="260">
                <template #default="{ row }">
                    <span class="summary-text">{{ row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column label="邮箱" prop="email" width="200" align="center"></el-table-column>
            <template #empty>
                <el-empty description="没有反馈数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            layout="jumper, total, sizes, prev, pager, next"
            background
            :total="total"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            class="pagination-bar"
        />
    </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { feedbackListService } from '@/api/feedback.js'
import { ElMessage } from 'element-plus'

const feedbacks = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

const contentMap = {
    '1': '垃圾信息',
    '2': '有害信息',
    '3': '涉嫌侵权'
}

const getFeedbackList = async () => {
    const params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    try {
        const res = await feedbackListService(params)
        feedbacks.value = res.data.items.map(item => {
            let newItem = { ...item }
            if (contentMap[newItem.feedbackType]) {
                newItem.feedbackType = contentMap[newItem.feedbackType]
            }
            return newItem
        })
        total.value = res.data.total
    } catch (e) {
        ElMessage.error('获取反馈列表失败，请稍后重试')
    }
}
getFeedbackList()

const onSizeChange = (size) => {
    pageSize.value = size
    getFeedbackList()
}
const onCurrentChange = (num) => {
    pageNum.value = num
    getFeedbackList()
}
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    background: #f7f8fa;
    border-radius: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    padding: 32px 32px 36px 32px;
    margin: 32px auto;
    max-width: 1100px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 0 0;

        .header-title {
            font-size: 24px;
            font-weight: 600;
            color: #222;
            letter-spacing: 1px;
        }
    }
}

.article-table {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 18px;

    .el-table__header th {
        background: #f2f3f5;
        color: #333;
        font-weight: 500;
        font-size: 16px;
        padding: 14px 0;
    }

    .el-table__row {
        transition: background 0.2s;
        font-size: 15px;
    }

    .el-table__row:hover {
        background: #f5f7fa;
    }

    .summary-text {
        color: #444;
        font-size: 15px;
        word-break: break-all;
        line-height: 1.7;
        padding: 6px 0;
        display: block;
    }
}

.pagination-bar {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    background: transparent;
}
</style>